<template>
	<view>
		<!-- 忘记密码 -->
		<view class="forgetStep">
			<view class="forgetIcon" v-for="item in stepArr">
				<view class="forgetId">{{item.id}}</view>
				<image src="../../static/img/right 2.svg"></image>
				<text class="forgetTitle">{{item.title}}</text>
			</view>
		</view>

		<view class="forgetCon">
			<view class="phone">
				<image src="../../static/img/phone.png"></image>
				<input class="phoneInput" v-model="phone" maxlength="11"  placeholder="输入手机号码"  @blur="phoneError"/>
				<text class="err">{{phoneMsg}}</text>
			</view>
			<view class="phone">
				<image src="../../static/img/phone.png"></image>
				<input class="phoneInput" v-model="stundentNum" maxlength="9"  placeholder="输入学号" type="number"/>
				<!-- <text class="err">{{stuMsg}}</text> -->
			</view>
			<view class="phone">
				<image src="../../static/img/phone.png"></image>
				<input class="phoneInput" v-model="oldPwd" maxlength="16"  placeholder="输入旧密码" @blur="oldPwdError"/>
				<text class="pwdErr">{{oldPwdMsg}}</text>
			</view>
			<view class="phone">
				<image src="../../static/img/phone.png" ></image>
				<input class="phoneInput" v-model="newPwd" maxlength="16"  placeholder="输入新密码" @blur="newPwdError"/>
				<text class="pwdErr">{{newPwdMsg}}</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				phoneMsg: '',
				stundentNum:'',
				stuMsg:'',
				oldPwd:'',
				newPwd:'',
				newPwdMsg:'',
				oldPwdMsg:'',
				stepArr: [{
						id: 1,
						title: "输入手机号"
					},
					{
						id: 2,
						title: "输入学号"
					},
					{
						id: 3,
						title: "输入新密码"
					},
					{
						id: 4,
						title: "确认新密码"
					},
					{
						id: 5,
						title: "确认修改"
					},
				]
			}
		},
		methods: {
			// 手机号码校验
			phoneError() {
				if (this.phone.length == 0 || this.phone == "") {
					this.phoneMsg = "请填写您的手机号码！"
				} else if (!/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(this.phone)) {
					this.phoneMsg = "请正确填写您的手机号码！"

				} else {
					this.phoneMsg = ""
				}
			},
			// 旧密码校验
			oldPwdError() {
				if (this.oldPwd.length == 0 || this.oldPwd == "") {
					this.oldPwdMsg = "请输入您的旧密码！"
				} else if (!/^(?=.*[0-9])(?=.*[a-zA-Z])[0-9A-Za-z~!@#$%^&*._?]{8,16}$/.test(this.oldPwd)) {
					this.oldPwdMsg = "密码必须包括数字、字母两种字符，特殊字符可有可无，长度在8-16位之间！"
				} else {
					this.oldPwdMsg = ""
				}
			},
			// 新密码校验
			newPwdError() {
				if (this.newPwd.length == 0 || this.newPwd == "") {
					this.newPwdMsg = "请输入您的新密码！"
				} else if (!/^(?=.*[0-9])(?=.*[a-zA-Z])[0-9A-Za-z~!@#$%^&*._?]{8,16}$/.test(this.newPwd)) {
					this.newPwdMsg = "密码必须包括数字、字母两种字符，特殊字符可有可无，长度在8-16位之间"
				} else {
					this.newPwdMsg = ""
				}
			},
		}
	}
</script>

<style lang="scss">
	.forgetStep {
		width: 100%;
		margin-left: 16px;
		margin-top: 36px;

		view:nth-last-child(1) {
			image {
				visibility: hidden;
			}
		}

		.forgetIcon {
			position: relative;
			float: left;
			text-align: center;

			.forgetId {
				text-align: center;
				width: 52px;
				height: 52px;
				line-height: 40px;
				border-radius: 52px;
				border: 6px solid rgba(117, 23, 238, 0.79);
				box-sizing: border-box;
				margin-right: 22px;
			}

			image {
				position: absolute;
				left: 48px;
				top: 12px;
				width: 30px;
				height: 30px;
			}

			.forgetTitle {
				position: absolute;
				left: -6px;
				top: 56px;
				font-size: 14px;
				line-height: 20px;
				white-space: nowrap;

			}
		}
	}

	.forgetStep:after {
		content: "";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}

	.forgetCon {
		margin-top: 58px;

		.phone {
			margin-left: 58px;
			width: 258px;
			height: 57px;
			border-radius: 21px;
			text-align: center;
			border: 1px solid rgba(187, 187, 187, 1);
			box-sizing: border-box;
			margin-bottom: 40px;
			image {
				float: left;
				margin-left: 18px;
				margin-top: 14px;
				width: 30px;
				height: 30px;
			}

			.phoneInput {
				height: 57px;
				line-height: 57px;
				text-align: left;
				padding-left: 19px;
				font-size: 14px;
			}
			.err{
				color:#e43d33;
			}
			.pwdErr{
				font-size: 14px;
				color:#e43d33;
			}
		}
	}
</style>
